<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息">
        <el-descriptions title="详细信息" direction="horizontal" :column="4" border>
          <el-descriptions-item label="用户名">{{ infoForm.username }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ infoForm.sex }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ infoForm.telephone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ infoForm.email }}</el-descriptions-item>
          <el-descriptions-item label="所在地">{{ infoForm.city }}</el-descriptions-item>
          <el-descriptions-item label="银行账户">{{ infoForm.bankaccount }}</el-descriptions-item>
          <el-descriptions-item label="账户余额">{{ infoForm.money }}元</el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 20px">
          <el-button @click="dialogFormVisible = true">修改信息</el-button>
          <el-button type="primary" @click="dialogBank = true">余额充值</el-button>
        </div>
        <el-dialog
            title="修改个人信息"
            :visible.sync="dialogFormVisible"
            :close-on-click-modal="false"
            :width="'500px'">
          <el-form :model="infoForm">
            <el-form-item label="用户名" :label-width="labelWidth">
              <el-input v-model="infoForm.username" disabled style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="labelWidth">
              <el-input v-model="infoForm.sex" disabled style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="labelWidth">
              <el-input v-model="infoForm.telephone" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="labelWidth">
              <el-input v-model="infoForm.email" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="所在地" :label-width="labelWidth">
              <el-input v-model="infoForm.city" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="银行账户" :label-width="labelWidth">
              <el-input v-model="infoForm.bankaccount" style="width: 300px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeUserInfo">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          :visible.sync="dialogBank"
          title="余额充值"
          :close-on-click-modal="false"
          :width="'250px'">
          <el-input placeholder="请输入金额" v-model.number="bank">
            <template slot="append">元</template>
          </el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogBank = false">取 消</el-button>
            <el-button type="primary" @click="reCharge">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="我的订单">
        <div>
          <el-radio-group v-model="radio1">
            <el-radio-button label="1">所有订单</el-radio-button>
            <el-radio-button label="2">待发货</el-radio-button>
            <el-radio-button label="3">待确认收货</el-radio-button>
            <el-radio-button label="4">退货中</el-radio-button>
            <el-radio-button label="5">待评价</el-radio-button>
            <el-radio-button label="6">已完成</el-radio-button>
          </el-radio-group>
        </div>
        <div class="orderInfo" v-for="(order, index) in orderFilter">
          <div class="orderHeader">
            <span style="margin-right: 40px">购买时间：{{ order.order.created }}</span>
            <span>店铺：{{ order.shop.shopName }}</span>
          </div>
          <div class="orderMain">
            <table class="tab1">
              <tbody>
                <tr>
                  <td width="400px">
                    <table class="tab2">
                      <tbody>
                        <tr>
                          <td width="20px"></td>
                          <td width="80px">
                            <img class="pic" :src="order.good.picGoods">
                          </td>
                          <td>
                            <a>
                              <span>{{ order.good.goodsName }}</span>
                            </a>
                          </td>
                          <td>
                            <span>×{{ order.order.num }}</span>
                          </td>
                          <td>
                            <span>{{ order.good.price }}元/件</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td class="td01" width="120px">
                    <p>订单总额（元）</p>
                    <p>{{ order.order.price }}</p>
                  </td>
                  <td class="td01">
                    <span>{{orderState(order.order)}}</span>
                  </td>
                  <td class="td01">
                    <el-button type="primary" @click="orderBtnClick(order.order, index)" v-show="orderBtn(order.order) !== '评价'">{{orderBtn(order.order)}}</el-button>
                    <el-button type="danger" @click="reGoodBtn(order.order)" v-show="orderBtn(order.order) === '确认收货'">退货</el-button>
                    <el-button type="primary" @click="openEvaluateDialog(index)" v-show="orderBtn(order.order) === '评价'">评价</el-button>
                    <el-dialog
                        title="提示"
                        :visible.sync="evaluateDialog"
                        width="30%"
                        :close-on-click-modal="false">
                      <div>
                        <span>请为购买的商品评分</span>
                      </div>
                      <el-rate v-model="evaluate.rate"></el-rate>
                      <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容"
                          v-model="evaluate.msg">
                      </el-input>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="cancelEvaluateBtn">取 消</el-button>
                        <el-button type="primary" @click="evaluateBtn">确 定</el-button>
                      </span>
                    </el-dialog>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="orderFooter">
            <span>收货人信息：{{order.address.name}}，{{order.address.telephone}}，{{order.address.city}}{{order.address.address}}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收货地址管理">
        <el-table
            :data="addressTable"
            style="width: 100%">
          <el-table-column
              label="收货人"
              width="100"
              prop="name">
          </el-table-column>
          <el-table-column
              label="联系电话"
              width="150"
              prop="telephone">
          </el-table-column>
          <el-table-column
              label="地区"
              prop="city">
          </el-table-column>
          <el-table-column
              label="详细地址"
              prop="address">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <AddAddress :title="'+添加收货地址'"></AddAddress>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AddAddress from '@/components/commons/addAddress'
export default {
  name: "userPage",
  components: {AddAddress},
  data() {
    return {
      dialogFormVisible: false,
      dialogBank: false,
      labelWidth: '120px',
      infoForm: {
        id: '',
        username: '',
        sex: '',
        telephone: '',
        email: '',
        city: '',
        bankaccount: '',
        money: '',
        bankId: ''
      },
      bank: '',
      addressTable: [],
      radio1: "1",
      orders: [],
      evaluateDialog: false,
      evaluate:{
        rate: 5,
        msg: '',
        index: ''
      }
    }
  },
  computed: {
    orderState(){
      return function (order) {
        if(order.delived === 0){
          return "待发货"
        }else{
          if(order.getGood === 0 && order.reGood === 0){
            return "卖家已发货"
          }else if(order.getGood === 1){
            if(order.evaluate === 0){
              return "待评价"
            }else{
              return "交易完成"
            }
          }else if(order.reGood === 1){
            return "退货中"
          }else if(order.reGood === 2 || order.reGood === 3){
            return "退货完成"
          }
        }
      }
    },
    orderBtn(){
      return function (order) {
        if(order.delived === 0){
          return "等待发货"
        }else if(order.getGood === 0){
          if(order.reGood === 0){
            return "确认收货"
          }else if(order.reGood === 1){
            return "退货中"
          }else if(order.reGood === 2){
            return "退货成功"
          }else{
            return "删除订单"
          }
        }else{
          if(order.evaluate === 0){
            return "评价"
          }else{
            return "删除订单"
          }
        }
      }
    },
    orderDialog(){
      return function (order) {
        if(this.orderBtn(order) === "等待发货"){
          return "等待卖家发货"
        }else if (this.orderBtn(order) === "确认收货"){
          return "是否确认收货？收货后无法再进行退货！"
        }else if (this.orderBtn(order) === "退货中"){
          return "商品退货中"
        }else if (this.orderBtn(order) === "退货成功"){
          return "退货已完成，金额已返还账户"
        }else if(this.orderBtn(order) === "删除订单"){
          return "订单删除后无法恢复，请谨慎操作！"
        }
      }
    },
    orderFilter(){
      if(this.radio1 === "1"){
        return this.orders
      }else if(this.radio1 === "2"){
        return this.orders.filter(o => {
          return o.order.delived === 0
        })
      }else if(this.radio1 === "3"){
        return this.orders.filter(o => {
          return o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood === 0
        })
      }else if(this.radio1 === "4"){
        return this.orders.filter(o => {
          return o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood === 1
        })
      }else if(this.radio1 === "5"){
        return this.orders.filter(o => {
          return o.order.delived === 1 && o.order.getGood === 1 && o.order.evaluate === 0
        })
      }else if(this.radio1 === "6"){
        return this.orders.filter(o => {
          return (o.order.delived === 1 && o.order.getGood === 1 && o.order.evaluate === 1) ||
              (o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood > 1)
        })
      }
    }
  },
  methods: {
    getAddress(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/address/${userId}`)
          .then(res => {
            this.addressTable = res.data.data
          })
    },
    handleDelete(index, row){
      this.$axios.post("/deleteAddress", {
        id: row.id
      }).then(res => {
        this.getAddress()
      })
    },
    getOrder(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/getOrderUser/${userId}`)
          .then(res => {
            this.orders = res.data.data
            this.orders.forEach(o => {
              o.good.picGoods = "data:image/jpeg;base64,"+o.good.picGoods
              o.order.created = o.order.created.replace("T", " ")
            })
          })
    },
    orderBtnClick(order, index){
      this.$confirm(this.orderDialog(order), '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=> {
        let url = null
        if (this.orderBtn(order) === "确认收货") {
          url = "/getGood"
          this.$axios.post("/payMoney", {
            bankAccount: this.orders[index].shop.bankAccount,
            money: order.price,
            level: this.orders[index].shop.level
          })
        } else if (this.orderBtn(order) === "删除订单") {
          url = "/deleteOrder"
        } else if (this.orderBtn(order) === "退货成功"){
          url = "/reGoodComplete"
        }
        if (url != null) {
          this.$axios.post(url, order)
              .then(res => {
                this.getOrder()
              })
        }
      })
    },
    reGoodBtn(order){
      this.$confirm("待退货完成后金额会退回账户，此操作无法恢复，请谨慎操作", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=> {
        this.$axios.post("/reGood", order)
            .then(res => {
              this.getOrder()
            })
      })
    },
    getUserInfo(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/getUserInfo/${userId}`)
          .then(res => {
            const {id, username, sex, telephone, email, city, bankaccount, money, bankId} = res.data.data
            this.infoForm = {id, username, sex, telephone, email, city, bankaccount, money, bankId}
          })
    },
    reCharge(){
      this.$confirm(`是否确认要为账户充值${this.bank}元？`, "充值确认", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/reCharge", {
          bankAccount: this.infoForm.bankaccount,
          money: this.bank + this.infoForm.money
        }).then(res => {
          this.getUserInfo()
          this.$message.success("充值成功")
          this.dialogBank = false
        })
      })
    },
    changeUserInfo(){
      this.$axios.post("/changeUserInfo", {
        id: this.infoForm.id,
        telephone: this.infoForm.telephone,
        eamil: this.infoForm.email,
        city: this.infoForm.city,
        bankAccount: this.infoForm.bankaccount,
        bankId: this.infoForm.bankId
      }).then(res => {
        this.$message.success("修改成功")
        this.dialogFormVisible = false
      })
    },
    openEvaluateDialog(index){
      this.evaluate.index = index
      this.evaluateDialog = true
    },
    evaluateBtn(){
      const orders = this.orderFilter
      const index = this.evaluate.index
      const order = orders[index].order
      this.$axios.post("/evaluate", order)
          .then(res => {
            this.addEvaluate(order.goodId)
            this.getOrder()
            this.cancelEvaluateBtn()
          })
    },
    addEvaluate(goodId){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.post("/addEvaluate", {
        userId: userId,
        goodId: goodId,
        starLevel: this.evaluate.rate,
        evaluate: this.evaluate.msg
      }).then(res => {
        this.getOrder()
      })
    },
    cancelEvaluateBtn(){
      this.evaluate.rate = 5
      this.evaluate.msg = ''
      this.evaluateDialog = false
    }
  },
  mounted() {
    this.$bus.$on("addAddress2", () => {
      this.getAddress()
    })
  },
  created() {
    this.getAddress()
    this.getOrder()
    this.getUserInfo()
  }
}
</script>

<style scoped>
.orderInfo{
  border: 1px solid #A4C8E8;
  width: 100%;
  height: 200px;
  position: relative;
  margin-top: 20px;
  /*background-color: red;*/
}
.orderHeader{
  /*border: 1px solid blue;*/
  position: relative;
  /*width: 100%;*/
  height: 40px;
  background-color: #DEEBF7;
  line-height: 40px;
  padding-left: 20px;
}
.orderMain{
  border: 1px solid #A4C8E8;
  border-left: none;
  border-right: none;
  position: relative;
  width: 100%;
  height: 120px;
  /*background-color: yellow;*/
}
.orderFooter{
  /*border: 1px solid green;*/
  position: relative;
  /*width: 100%;*/
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  /*background-color: #DEEBF7;*/
}
.tab1{
  width: 100%;
  height: 120px;
  /*background-color: blue;*/
}
.tab2{
  width: 100%;
  height: 80px;
}
.pic{
  width: 80px;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
.td01{
  border-left: 2px dotted #dcdcdc;
  text-align: center;
}
</style>